<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.prime.com.tr/ui">

<!-- 	Proyecto final de Geoinformática	-->

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<h:outputStylesheet library="css" name="default.css" />
	<h:outputStylesheet library="css" name="cssLayout.css" />
	<h:outputStylesheet library="css" name="custom.css" />
	<title>Gestor de dominios geométricos</title>

	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<h:link rel="stylesheet" href="OpenLayers-2.11/theme/default/style.css"
		type="text/css" />
	<h:link rel="stylesheet" href="css/style.css" type="text/css" />
	<script type="text/javascript"
		src="OpenLayers-2.11/lib/Firebug/firebug.js"></script>
	<script type="text/javascript" src="OpenLayers-2.11/lib/OpenLayers.js"></script>
	<style type="text/css">
input,select,textarea {
	font: 0.9em Verdana, Arial, sans-serif;
}

#map {
	width: 300px;
	height: 150px;
	border: 1px solid #ccc;
}

#map2 {
	width: 300px;
	height: 150px;
	border: 1px solid #ccc;
}

#text {
	font-size: 0.85em;
	margin: 1em 0 1em 0;
	width: 100%;
	height: 10em;
}

#info {
	position: relative;
	padding: 2em 0;
	margin-left: 540px;
}

#output {
	font-size: 0.8em;
	width: 100%;
	height: 512px;
	border: 0;
}

p {
	margin: 0;
	padding: 0.75em 0 0.75em 0;
}
</style>
	<script type="text/javascript" src="js/prueba.js"></script>
</h:head>
<h:body>
	<div id="top" class="top">
		<ui:insert name="top">
			<h2>Gestor de dominios geométricos</h2>
		</ui:insert>
	</div>
	<h:form id="indexProyectoForm" prependId="false"
		onkeypress="return event.keyCode != 13;">
		<p:panel styleClass="session">
			<p:messages />
			<h:panelGrid columns="4" cellspacing="5" cellpadding="5">
				<p:panel styleClass="session" header="Crear dominio geométrico"
					id="panelReticula">
					<p:fieldset legend="Retícula">
						<h:panelGrid columns="3" cellspacing="5" cellpadding="5"
							id="panelCrearObjetoGeometrico">
							<h:outputLabel value="Origen:" styleClass="optionalLbl" />
							<h:panelGrid columns="6" cellspacing="5" cellpadding="5">
								<h:outputLabel for="origenX" value="X" styleClass="requiredLbl" />
								<p:watermark for="origenX" value="0" />
								<p:inputText value="#{geometricDomain.origenX}" id="origenX"
									label="Valor del origen en X" type="hidden" required="true"
									styleClass="requiredLbl" style="width:30px;height:14px;" />
								<h:outputLabel for="origenY" value="Y" styleClass="requiredLbl" />
								<p:watermark for="origenY" value="0" />
								<p:inputText value="#{geometricDomain.origenY}" id="origenY"
									label="Valor del origen en Y" type="hidden" required="true"
									styleClass="requiredLbl" style="width:30px;height:14px;" />
							</h:panelGrid>
						</h:panelGrid>
						<h:panelGrid columns="3" cellspacing="5" cellpadding="5">
							<h:outputLabel for="numX" value="Número de elementos en X:"
								styleClass="requiredLbl" />
							<p:watermark for="numX" value="10" />
							<p:inputText
								value="#{geometricDomain.geometricObjectSelected.grid.numPointsX}"
								id="numX" label="Número de elementos en X" type="hidden"
								style="width:30px;height:14px;" required="true" />
							<h:outputLabel for="numY" value="Número de elementos en Y:"
								styleClass="requiredLbl" />
							<p:watermark for="numY" value="10" />
							<p:inputText
								value="#{geometricDomain.geometricObjectSelected.grid.numPointsY}"
								id="numY" label="Número de elementos en Y" type="hidden"
								style="width:30px;height:14px;" required="true" />
							<h:outputLabel for="intSize" value="Tamaño intervalo:"
								styleClass="requiredLbl" />
							<p:watermark for="intSize" value="1" />
							<p:inputText
								value="#{geometricDomain.geometricObjectSelected.grid.intSize}"
								id="intSize" label="Valor entero del tamaño" type="hidden"
								style="width:30px;height:14px;" required="true" />
						</h:panelGrid>
					</p:fieldset>
					<p:outputPanel layout="block" style="text-align:right">
						<p:commandButton
							update="panelObjetosGeometricos, panelFrame2, panelCrearObjetoGeometrico,panelReticula,panelMapa"
							value="Crear" action="#{geometricDomain.guardarDominio}"
							process="@this, panelReticula" id="guardarBtn"
							image="ui-icon-check" title="Crear">
							<p:ajax
								update="panelObjetosGeometricos, panelFrame2, panelCrearObjetoGeometrico, panelReticula,panelMapa"
								immediate="true" />
						</p:commandButton>
						<p:spacer width="5" height="40" />
					</p:outputPanel>
				</p:panel>
				<h:panelGrid columns="1" id="btnsFrame1">
					<p:commandButton update="panelFrame2" process="@this"
						action="#{geometricDomain.ajustar}" immediate="true"
						id="ajustarBtn" image="ui-icon-arrowthick-1-e" title="Ajustar" />
					<p:commandButton update="panelFrame2" process="@this"
						action="#{geometricDomain.validar}" immediate="true"
						id="validarBtn" image="ui-icon-circle-check" title="Validar" />
				</h:panelGrid>
				<h:panelGrid columns="1" id="panelMapa">
					<p:outputPanel>
						<iframe src="#{geometricDomain.url}" width="1150" height="450" id="frameMapa">
							<p style="font-size: 12px">Your browser does not support
								iframes.</p>
						</iframe>
					</p:outputPanel>
				</h:panelGrid>
			</h:panelGrid>
			<h:panelGrid columns="1" width="100%">
				<p:fieldset legend="Dominios Geométricos">
					<h:panelGrid columns="1" cellspacing="2"
						id="panelObjetosGeometricos">
						<p:dataTable var="objetoGeometrico"
							value="#{geometricDomain.geometricObjectList}"
							id="tablaObjetosGeometricos" update="panelMapa"
							selection="#{geometricDomain.geometricObjectSelected}"							
							paginator="true" rows="5"
							paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
							paginatorPosition="bottom" rowsPerPageTemplate="5,10,15"
							emptyMessage="No existen objetos geométricos a mostrar"
							selectionMode="single">

							<p:column headerText="Id" >
								<h:outputText value="#{objetoGeometrico.id}"
									styleClass="outputTextStyle" />
							</p:column>
							<p:column headerText="Usuario">
								<h:outputText value="#{objetoGeometrico.user}"
									styleClass="outputTextStyle" />
							</p:column>

							<p:column headerText="Origen">
								<h:outputLabel value="#{objetoGeometrico.gridOrigin}" />
							</p:column>

							<p:column headerText="Número de puntos en X">
								<h:outputText value="#{objetoGeometrico.grid.numPointsX}"
									styleClass="outputTextStyle" />
							</p:column>

							<p:column headerText="Número de puntos en Y">
								<h:outputText value="#{objetoGeometrico.grid.numPointsY}"
									styleClass="outputTextStyle" />
							</p:column>

							<p:column headerText="Tamaño intervalo">
								<h:outputText value="#{objetoGeometrico.grid.intSize}"
									styleClass="outputTextStyle" />
							</p:column>

							<p:column headerText="Válido">
								<h:outputText value="NO" rendered="#{!objetoGeometrico.valid}"
									styleClass="outputTextStyle" />
								<h:outputText value="SI" rendered="#{objetoGeometrico.valid}"
									styleClass="outputTextStyle" />
							</p:column>

							<p:column headerText="Opciones">
								<p:commandButton id="eliminarObjetoBtn"
									process="@this, tablaObjetosGeometricos"
									oncomplete="confirmEliminarObjetoGeoWV.show()"
									image="ui-icon-trash" title="Eliminar">
									<f:setPropertyActionListener value="#{objetoGeometrico}"
										target="#{geometricDomain.geometricObjectSelected}" />
								</p:commandButton>
							</p:column>
						</p:dataTable>
					</h:panelGrid>
				</p:fieldset>
			</h:panelGrid>
		</p:panel>
	</h:form>

	<p:confirmDialog modal="true" appendToBody="true"
		message="¿Está seguro de que desea eliminar el dominio geométrico?"
		width="400" showEffect="explode" hideEffect="explode"
		header="Confirmación" severity="alert" id="confirmEliminarObjetoGeo"
		widgetVar="confirmEliminarObjetoGeoWV">
		<h:form>
			<p:outputPanel layout="block" style="text-align:center">
				<p:commandButton value="Sí" update="panelObjetosGeometricos"
					action="#{geometricDomain.eliminarDominio}" process="@this"
					immediate="true" oncomplete="confirmEliminarObjetoGeoWV.hide();"
					image="ui-icon-check" />
				<p:spacer width="10" />
				<p:commandButton value="No" image="ui-icon-close"
					onclick="confirmEliminarObjetoGeoWV.hide()" type="button" />
			</p:outputPanel>
		</h:form>
	</p:confirmDialog>

</h:body>

</html>